<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { queryCommunitySubPage } from '/@/api/community_type';
  import type { CommunityRecord } from '/@/api/model/community_typeModel';
  import ClubCommunity from './ClubCommunity.vue'

  const props = withDefaults(
    defineProps<{
      id: number;
    }>(),
    {},
  );
  const communityList = ref<CommunityRecord[]>([]);

  onMounted(async () => {
    try {
      console.log(props.id);
      
      const result = await queryCommunitySubPage();
      communityList.value = result;
      console.log(communityList.value );
      
    } catch (error) {
      console.error(`Failed to query community list: ${error}`);
    }
  });
</script>

<template>
  <a-row :gutter="[24, 24]" class="px-[20px]">
    <a-col :span="8" v-for="(item, index) in communityList" :key="index">
        <ClubCommunity class="mb-[10px]" :data="item" />
    </a-col>
  </a-row>
</template>
